<div class="mm-page" style="">

<!--商城头部固定-->
<div id="page">
    <header id="header">
        <h1> 微信商城首页 </h1>
        <div class="header_r"><a class="ico_user" href="javascript:;"></a>
            <div class="user_list">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">个人资料</a></li>
                    <li><a href="#">已购课程</a></li>
                    <li><a href="#">会员卡</a></li>
                </ul>
            </div>
        </div>
    </header>
</div>

<!--图片轮播效果-->
<section class="goods_slider">
    <div class="blank2"></div>
    <div id="slideBox" class="slideBox">
        <div class="scroller">
            <div class="tempWrap" style="overflow:hidden; position:relative;" id="slider">
                <ul>
                    <li>
                        <a href="/mobile/class_show">
                            <img alt="" src="http://www.51wephone.com/game/eshop/assets/images/wx_02.jpg">
                            <span class="text">【百草味】坚果零食特产干果 奶油味<br>夏威夷果200gx3包送开果器</span>
                        </a>
                    </li>
                    <li>
                        <a href="/mobile/class_show">
                            <img alt="" src="http://www.51wephone.com/game/eshop/assets/images/wx_02.jpg">
                            <span class="text">【百草味】坚果零食特产干果 奶油味<br>夏威夷果200gx3包送开果器</span>
                        </a>
                    </li>
                    <li>
                        <a href="/">
                            <img alt="" src="http://www.51wephone.com/game/eshop/assets/images/wx_02.jpg">
                            <span class="text">【百草味】坚果零食特产干果 奶油味<br>夏威夷果200gx3包送开果器</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="icons">
            <ul>
            </ul>
        </div>
    </div>
    <div class="blank2"></div>
</section>


<!--商品列表效果-->
<section class="s-detail">
<header>
    <ul style="position: static;" id="detail_nav">
        <li id="tabs1" class="sub_menu" data-list-id="renqi">人气 <img src="http://www.51wephone.com/game/eshop/assets/images/jt.jpg"></li>
        <li id="tabs2" class="sub_menu" data-list-id="weizhi">位置<img src="http://www.51wephone.com/game/eshop/assets/images/jt.jpg"></li>
        <li id="tabs3" class=""> 时间</li>
        <li id="tabs4" class="sub_menu" data-list-id="qblist"> 二级分类 <img src="http://www.51wephone.com/game/eshop/assets/images/jt.jpg"></li>
    </ul>
</header>
<div class="qblist" id="renqi">
    <div class="list_container single">
        <span><a href="#">进口零食</a></span>
        <span><a href="#">干果</a></span>
        <span><a href="#">加工熟食</a></span>
        <span><a href="#">鲜果生疏</a></span>
    </div>
</div>
<div class="qblist" id="weizhi">
    <div class="list_container single">
        <span><a href="#">乳制品</a></span>
        <span><a href="#">进口零食</a></span>
        <span><a href="#">干果</a></span>
        <span><a href="#">加工熟食</a></span>
    </div>
</div>
<div class="qblist" id="qblist">
    <div class="list_container">
        <span>
            <a href="javascript:;" class="active main_item">鲜果生疏</a>
            <div class="list_container sub_item active">
                <span><a href="#">12</a></span>
                <span><a href="#">34</a></span>
                <span><a href="#">56</a></span>
            </div>
        </span>
        <span>
            <a href="javascript:;" class="main_item">乳制品</a>
            <div class="list_container sub_item">
                <span><a href="#">66</a></span>
                <span><a href="#">77</a></span>
                <span><a href="#">88</a></span>
            </div>
        </span>
        <span><a href="#">进口零食</a></span>
        <span><a href="#">干果</a></span>
        <span><a href="#">加工熟食</a></span>
        <span><a href="#">鲜果生疏</a></span>
        <span><a href="#">乳制品</a></span>
        <span><a href="#">进口零食</a></span>
        <span><a href="#">干果</a></span>
        <span><a href="#">加工熟食</a></span>
    </div>
</div>

<div id="tab1" class="">

    <div class="page_list">
        <div class="list">
            <% 5.times do |i| %>
            <a class='add-line' href="/mobile/class_show" >
                <div class="img_wrap"><img src="http://www.51wephone.com/game/eshop/assets/images/wbsy_06.jpg" width="120"></div>
                <div class="text_wrap">
                    <p class="name">卡可芙 408克臻萃松露巧克力8口味</p>
                    <p class="promo">7天新鲜生产 100%进口可可粉,8种口味408克年货礼盒装</p>
                    <p class="price">
                        <span class="zk">1000人浏览</span>
                        <span class="feed">培训一次</span>
                    </p>
                </div>
            </a>
            <% end %>
            
        </div>
    </div>
</div>


</section>


</div>


<script type="text/javascript">
    $(document).ready(function () {

        //图片轮播
        (function($$){
            var bullets=$('.icons');
            var pic=$('.tempWrap ul li');
            var len=pic.length;
            var i=0;
            for(i=0;i<len;i++){
                if(i==0){
                    bullets.append('<li class="on"></li>');
                }else{
                    bullets.append('<li></li>');
                }
            };

            var slider= new $$(document.getElementById('slider'),{
                auto: 3000,
                continuous: true,
                callback: function(pos) {
                    bullets.find('li').eq(pos).addClass('on').siblings().removeClass('on');
                }
            });
            bullets.eq(slider.getPos()).addClass('on').siblings().removeClass('on')
            document.getElementById('slider').addEventListener('webkitTransitionEnd',function(){
                bullets.find('li').eq(slider.getPos()).addClass('on').siblings().removeClass('on');
            },false)
        })(Swipe);

        $('body').click(function(e) {
          if (!($(e.target).hasClass('sub_menu') || $(e.target).parents('.qblist').length !== 0)) {
            if ($('.qblist.current').length !== 0 || $('.user_list').css('display') !== 'none') {
              $('.qblist, .user_list').hide();
              $('.sub_menu, .qblist').removeClass('current');
              return e.preventDefault();
            }
          }
        });
  
    });

</script>
